<!--  -->
<template>
  <div class="goods-list">
    <!-- 标签导航
   <router-link :to="'/home/goodsinfo/'+item.id" class="goods-item" v-for="item  in goodsList" :key="item.id" tag="div">
     <img :src="item.img_url" alt="">
     <h3 class="item-title" v-text="item.title"></h3>
     <div class="item-info">
       <p class="info-price">
         <span class="pr-curr">￥{{ item.sell_price }}</span>
         <span class="pr-dis">￥{{ item.market_price }}</span>
       </p>
       <p class="info-sale">
         <span>热卖中</span>
         <span>剩{{ item.stock_quantity }}件</span>
       </p>
     </div>
    </router-link> -->
    <!-- 编程式导航 -->
    <div class="goods-item" v-for="item  in goodsList" :key="item.id" @click="skip(item.id)">
     <img :src="item.img_url" alt="">
     <h3 class="item-title" v-text="item.title"></h3>
     <div class="item-info">
       <p class="info-price">
         <span class="pr-curr">￥{{ item.sell_price }}</span>
         <span class="pr-dis">￥{{ item.market_price }}</span>
       </p>
       <p class="info-sale">
         <span>热卖中</span>
         <span>剩{{ item.stock_quantity }}件</span>
       </p>
     </div>
    </div>
    <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pageIndex: 1,
        goodsList: []
      }
    },
  
    created() {
      this.getGoodsList()
    },
  
    methods: {
      getGoodsList() { // 获取评论数据
        this.axios.get('api/getgoods?pageindex='+this.pageIndex)
        .then( resp => {
          if (resp.data.status ===0) { // 获取数据成功
            this.goodsList = this.goodsList.concat(resp.data.message);
          }else { // 获取失败
            Toast('获取数据失败')
          }
        })
      },
      loadMore() { // 加载更多
        this.pageIndex++
				this.getGoodsList()
      },
      skip(id) {
        this.$router.push({name: 'goodsinfo', params: {id: id}})
      }
    },
  
    components: {}
 }
</script>

<style lang='scss' scoped>
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 7px;
    .goods-item {
      width: 49%;
      border: 1px solid #ccc;
      box-shadow: 0 0 4px #ccc;
      margin: 4px 0;
      padding: 0 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img {
        width: 100%;
        min-height: 171px;
      }
      .item-title {
        font-size: 14px;
      }
      .item-info {
        background-color: #eee;
        p {
          margin: 0;
          padding: 5px;
        }
        .info-price {
          .pr-curr {
            font-size: 13px;
            font-weight: bold;
            color: red;
          }
          .pr-dis {
            font-size: 12px;
            text-decoration: line-through;
            margin-left: 10px;
          }
        }
        .info-sale {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
        }
      }
    }
  }
</style>